<template>
  <div>
    <van-nav-bar :fixed="true" left-arrow @click-left="onClickLeft" :placeholder="true" title="筛选"></van-nav-bar>
    <div class="screen">
      <div class="students-here">
        <p>驾校服务</p>
        <van-radio-group direction="horizontal" v-model="radio">
          <div class="screen-list">
            <div
              v-for="(item, index) in service"
              :key="index"
              class="tab-items"
              :class="{ checkeds: index == n }"
              @click="Service(index)"
            >{{item.list}}</div>
          </div>
          <!-- <div>自有考场</div>
          <div>班车接送</div>-->
        </van-radio-group>
      </div>

      <!-- 学员口碑 -->
      <!-- <div class="students-here">
        <p>学员口碑</p>
        <div class="screen-list">
          <div v-for="(item, index) in praise" :key="index">{{item.list}}</div>
        </div>
      </div>-->
      <!-- 驾照类型 -->
      <div class="students-here">
        <p>驾照类型</p>
        <div class="screen-type">
          <div v-for="(item, index) in genre" :key="index">
            <img :src="item.img" alt />
            <p>{{item.title}}</p>
          </div>
        </div>
      </div>
      <!-- 所属区域 -->
      <div class="students-here">
        <p>所属区域</p>
        <div class="screen-list">
          <div v-for="(item, index) in district" :key="index">{{item.area}}</div>
        </div>
      </div>
      <!-- 优惠活动 -->
      <div class="students-here">
        <p>优惠活动</p>
        <div class="screen-list">
          <div v-for="(item, index) in discounts" :key="index">{{item.title}}</div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="screen-buttom">
      <div class="screen-reset">重置</div>
      <div @click="onClickLeft" class="screen-confirm">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "screen",
  data() {
    return {
      // school: true,
      n: 0,
      radio: "1",
      // 假数据
      // 驾校服务
      service: [{ list: "自有考场" }, { list: "班车接送" }],
      // 学员口碑
      praise: [
        { list: "热情服务" },
        { list: "教学耐心" },
        { list: "环境优雅" },
        { list: "收费合理" }
      ],
      // 驾照类型
      genre: [
        {
          img: require("../../assets/images/41.png"),
          // imgs: require("../../assets/images/c41.png"),
          title: "C1/C2/C3"
        },
        {
          img: require("../../assets/images/44.png"),
          // imgs: require("../../assets/images/c41.png"),
          title: "A2/B2"
        },
        {
          img: require("../../assets/images/43.png"),
          // imgs: require("../../assets/images/c41.png"),
          title: "A1A3B1"
        },
        {
          img: require("../../assets/images/42.png"),
          // imgs: require("../../assets/images/c41.png"),
          title: "D/E/F"
        }
      ],
      // 所属区域
      district: [
        { area: "长安区" },
        { area: "桥西区" },
        { area: "桥东区" },
        { area: "新华区" },
        { area: "井陉矿区" },

        { area: "裕华区" },
        { area: "井陉县" },
        { area: "正定县" },
        { area: "栾城区" },
        { area: "行唐县" }
      ],
      // 优惠活动
      discounts: [
        { title: "限时特惠" },
        { title: "报名有奖" },
        { title: "免费试学" },
        { title: "团体优惠" }
      ]
    };
  },
  methods: {
    Service(index) {
      this.n = index;
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
    created(){
    let dsBridge = require("dsbridge");
         dsBridge.call("goBack","", function() {
           history.go(-1);
         });
   },
};
</script>

<style>
.tab-items:hover {
  color: #0b59cd;
  border: 1px solid #0b59cd;
}
.tab-items.checkeds {
  /* color: #0b59cd; */
}
</style>